import React, { Component } from "react";
import PropTypes from 'prop-types';
import { Icon,Row,Collapse,Panel } from "tinper-bee";
import classNames from 'classnames';
import './index.less';


const propTypes = {
    back: PropTypes.bool,
    backFn: PropTypes.func,
    title: PropTypes.string.isRequired
};

const defaultProps = {
    back: false,
    backFn: () => {
        window.history.go(-1);
    },
    title: ''
};

class CollapsePanel extends Component {
    constructor(props, context) {
        super(props);
        this.state = {
            showContent:true
        };
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.in != this.state.showContent) {
            this.setState({showContent:nextProps.in})
        }
    }

    componentDidMount() {
        this.setState({showContent:this.props.in})
    }

    toggleContent = () => {
        let { showContent } = this.state;
        this.setState({ showContent: !showContent });
    }

    

    render() {
        let { showContent } = this.state;
        const { children, title,hidePanel=false} = this.props;
        var contentClass = classNames({
            'child-content': true,
            'show-child': showContent,
        });

        var collapseClass = classNames({
            'collapse-panel': true,
            'u-row': showContent,
            'margin-none':true,
            'hidden':hidePanel
        });
        
        return (
            <div className={collapseClass}>
                <div className="collapse-title">
                    <span>{title}</span>
                    <span onClick={this.toggleContent}>
                    {showContent && <Icon type="uf-triangle-down"></Icon>}
                    {!showContent && <Icon type="uf-triangle-right"></Icon>}
                    </span>
                </div>
                <Panel collapsible expanded={showContent}>
                    <div className="u-row ucf-exam-form">{children}</div>
                </Panel> 
            </div>
        )
    }
}

CollapsePanel.propTypes = propTypes;
CollapsePanel.defaultProps = defaultProps;
export default CollapsePanel;
